<template>
  <div>
    <title-panel/>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 26%"><span style="color:#FF3B30;">*</span>交接批次</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.deliveryBatchNo }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 26%"><span style="color:#FF3B30;">*</span>交接日期</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.deliveryDate }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>销售批次</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.salesBatchNos }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 60%"><span style="color:#FF3B30;">*</span>生鲜乳总数量（kg）</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.freshMilkTotal }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%">押运员 </div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.escort }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>司机</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.driver }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>车牌号码</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.carNo }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>出发时间</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.departureTime }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 70%"><span style="color:#FF3B30;">*</span>出发时生鲜乳温度（℃）</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.departureTemperature }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>到达时间</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.arrivalTime }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 70%"><span style="color:#FF3B30;">*</span>到达时生鲜乳温度（℃）</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.arrivalTemperature }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>收奶员</div>
        <div class="line-text-out text-right" style="width: 68%">
          {{ obj.milkman }}
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;">*</span>初检结果</div>
        <div class="line-text-out text-right" style="width: 68%" v-if='obj.detectionResult === "DETECTIONRESULT_1"'>
          合格
        </div>
        <div class="line-text-out text-right" style="width: 68%" v-else>
          不合格
        </div>
      </div>
    </van-cell>
    <van-cell>
      <div class="flex-between col-333333">
        <div class="m-r-10" style="width: 40%"><span style="color:#FF3B30;"></span>检测报告</div>
        <div class="line-text-out text-right" style="width: 68%">
          <!-- {{ obj.reportFiles }} -->
        </div>
      </div>
    </van-cell>
    <UploadImg v-model="obj.reportFiles" style="padding: 15px;" :isDetails="true">
    </UploadImg>
    <title-panel title='车辆运行轨迹'/>
    <div style='height: 300px;width: 100%;background: white;padding: 15px'>
      <div id='wrapper' style='height: 270px;width: 100%;'>
      </div>
    </div>
    <title-panel title='车内温湿度'/>
    <div ref="dom" id='temperature' class="echarts1"></div>
    <div ref="dom" id='humidness' class="echarts echarts2"></div>
    <div style='height: 130px'/>
    <div class="m-b-10 shop">
      <div class="flex-between bottom content font-14 line-height-2">
        <div
          class="col-8686 text-center footerImg"
          @click="goCompile"
          style="width: 50%">
          <img src="../../assets/img/bianji.png" alt="" />
          编辑
        </div>
        <div
          class="col-8686 text-center footerImg"
          @click="deleteContent"
          style="width: 50%"
        >
          <img src="../../assets/img/shanchu.png" alt="" />
          删除
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
// require("https://webapi.amap.com/maps?v=1.4.8&key=bd95162351a05c24009f8ff0c32d79a0")
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Cell,
  Popup,
  Image
} from 'vant'
import UploadImg from '@/components/uploadImg'
import TitlePanel from '@/components/titlePanel'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import * as echarts from 'echarts'
export default {
  components: {
    UploadImg,
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Image.name]: Image,
    [Dialog.name]: Dialog,
    [AMap.name]: AMap
  },
  data() {
    return {
      dom: null,
      id: null,
      obj: {},
      tenantCode: getValue('tenantCode'),
      subjectInfoId: getValue('subjectInfoId'),
      loginUserId: getValue('loginUserId')
    }
  },
  created() {
  },
  mounted() {
    this.id = getValue('connectId')
    this.getDetail()
    clearValue('connectId')
    this.getEacharts()
    this.$nextTick(() => {
      new AMap.Map('wrapper', {
        zoom: 11
      })
    })
  },
  methods: {
    goCompile() {
      setValue('connectObj', JSON.stringify(this.obj))
      this.$bridge.call('addRawMilkConnect')
    },
    getDetail() {
      getHandle('/agri/api/yzbzh/freshMilkDelivery/queryDetail/' + this.id, this.params).then(res => {
        this.obj = res.data
        this.obj.reportFiles = !!this.obj.reportFiles ? this.obj.reportFiles.split(','):[]
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom)
          if (this.option) {
            this.dom.setOption(this.option)
          }
        })
      })
    },
    beforeClose(action, done) {
      const index = this;
      if (action === 'confirm') {
        postHandle(
          `/agri/api/yzbzh/freshMilkDelivery/delete/${this.id}?loginUserId=${this.loginUserId}&tenantCode=${this.tenantCode}&subjectInfoId=${this.subjectInfoId}`
        ).then((res) => {
          if (res.status === 0) {
            this.$toast(res.msg)
            this.$bridge.call('base.closePage')
            done()
          } else {
            this.$toast(res.msg)
            done()
          }
        })
      } else {
        done()
      }
    },
    deleteContent() {
      Dialog.confirm({
        title: '提示',
        message: '确定要删除吗',
        beforeClose: this.beforeClose
      })
    },
    getEacharts() {
      const xLabel = ['09:00', '12:00', '15:00', '18:00', '21:00']
      const goToSchool = [15, 21, 19, 13, 8]
      const temperatureChart = echarts.init(document.getElementById('temperature'))
      temperatureChart.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255, 192, 121,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255, 192, 121,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255, 192, 121,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          align: 'left',
          right: '10%',
          type: 'plain',
          textStyle: {
            color: '#999999',
            fontSize: 16
          },
          itemStyle:{
            color:'#fff',
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 18,
          data: ['温度']
        },
        grid: {
          top: '15%',
          left: '15%',
          right: '10%',
          bottom: '15%'
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#999999',
              padding: 16,
              fontSize: 14
            },
            formatter: function(data) {
              return data
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#FFC079'
            }
          },
          axisTick: {
            show: false
          },
          data: xLabel
        }],
        yAxis: [{
          name: '°C',
          nameTextStyle: {
            color: '#999999',
            fontSize: 16,
            padding:[0,0,10,-60]
          },
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#eee'
            }

          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999999',
              padding: 16
            },
            formatter: function(value) {
              if (value === 0) {
                return value
              }
              return value
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '温度',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          lineStyle: {
            normal: {
              width: 1,
              color: 'rgba(255, 192, 121,1)' // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)'
          },
          itemStyle: {
            borderColor: '#FFC079',
            borderWidth: 1
          },
          tooltip: {
            show: true
          },
          areaStyle: { // 区域填充样式
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 192, 121,.3)'
              }, {
                offset: 1,
                color: 'rgba(255, 192, 121, 0)'
              }], false),
              shadowColor: 'rgba(255, 192, 121, 0.5)',
              shadowBlur: 20
            }
          },
          data: goToSchool
        }]
      })

      const humidnessChat = echarts.init(document.getElementById('humidness'))
      humidnessChat.setOption({
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(55, 181, 181,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(55, 181, 181,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(55, 181, 181,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        legend: {
          align: 'left',
          right: '10%',
          type: 'plain',
          textStyle: {
            color: '#999999',
            fontSize: 16
          },
          itemStyle:{
            color:'#fff',
          },
          // icon:'rect',
          itemGap: 25,
          itemWidth: 18,
          data: ['湿度']
        },
        grid: {
          top: '15%',
          left: '15%',
          right: '10%',
          bottom: '15%'
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: '#eee'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#999999',
              padding: 16,
              fontSize: 14
            },
            formatter: function(data) {
              return data
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#37B5B5'
            }
          },
          axisTick: {
            show: false
          },
          data: xLabel
        }],
        yAxis: [{
          name: '%',
          nameTextStyle: {
            color: '#999999',
            fontSize: 16,
            padding:[0,0,10,-60]
          },
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#eee'
            }

          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999999',
              padding: 16
            },
            formatter: function(value) {
              if (value === 0) {
                return value
              }
              return value
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '湿度',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          smooth: true,
          lineStyle: {
            normal: {
              width: 1,
              color: 'rgba(55, 181, 181,1)' // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)'
          },
          itemStyle: {
            borderColor: '#37B5B5',
            borderWidth: 1
          },
          tooltip: {
            show: true
          },
          areaStyle: { // 区域填充样式
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(55, 181, 181,.3)'
              }, {
                offset: 1,
                color: 'rgba(55, 181, 181, 0)'
              }], false),
              shadowColor: 'rgba(55, 181, 181, 0.5)',
              shadowBlur: 20
            }
          },
          data: goToSchool
        }]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.van-cell {
  line-height: 40px;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 2em;
}
.m-r-10 {
  margin-right: 10px;
}
.line-text-out {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.col-1b1b {
  color: #1b1b1b;
}
.col-8686 {
  color: #868686;
}
::v-deep .van-cell {
  // border-bottom: 1px solid #dbd8d8;
}
.imgstyle::after {
  content: "";
  width: 100px;
}
.footerImg {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #37b5b5;
  > img {
    width: 22px;
    height: 22px;
  }
}
.shop .bottom {
  position: fixed;
  bottom: 0;
  height: 68px;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  padding: 8px 10px 8px 14px;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.addbtn{
    width: 50px;
    height: 24px;
    font-size: 13px;
    padding: 0;
    margin-top: 2px;
}
.echarts1{
  width:100%;
  height:330px;
  background: white;
  padding-top: 30px
}
.echarts2{
  width:100%;
  height:330px;
  background: white;
  padding-top: 30px;
  padding-bottom: 20px
}
</style>
